<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/bootstrap/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.js"></script>
<script
	src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">

	function checkForm(){
		var dbs=$("#dbs").val();
		var tables=$("#tables").val();
		var fields=$("#fields").val();
		var et=$("#et").val();
		var desc=$("#desc").val();
		var time=$("#time").val();
		var span=$("#span").val()
		var phone=$("#phone").val();
		var value=$("#value").val();
		var condition=$("#condition").val();
		var checknumber =/^[1-9]*[1-9][0-9]*$/;
		
		<%-- var result="<%=session.getAttribute("ok")%>";  --%>
		
		<%-- <% 
		String msg = null;
		Cookie[] cookies=request.getCookies();
		for(int i=0;cookies!=null && i<cookies.length;i++){
			if(cookies[i].getName().equals("message")){
				msg = cookies[i].getValue();
			}
		}
		pageContext.setAttribute("msg", msg);
		%> --%>
		
	    if(dbs == "0"){
			alert("请将信息填写完整！");
			return false;
		}
		if(tables == "0"){
			alert("请将信息填写完整！");
			return false;
		}
		if(fields == "0"){
			alert("请将信息填写完整！");
			return false;
		}
		if(locationValue == ""){
			alert("请将信息填写完整！");
			return false;
		}
		if(desc == ""){
			alert("事件描述不能为空");
			return false;
		}
		if(et == ""){
			alert("请选择事件类型！");
			return false;
		} 
		else {
			if((et == "1" )&& (!checknumber.test(time))) {
				if(time==""){
					alert("请填写轮询时间");
					return false;
				}
				else if((!checknumber.test(time))){
					alert("请填写正确的轮询时间！"+time);
					return false;
				}
			}
			else if(et == "2" ){
				alert("暂不支持报表查询");
				return false;	
			}
		}
		if((!checknumber.test(span))){
			alert("请填写正确的时间片");
			return false;
		}
		if(condition == "0"){
			alert("请填写条件！");
			return false;
		}
		if((!checknumber.test(value))){
			alert("请填写正确的数值！");
			return false;
		}
		if(phone == "0"){
			alert("请填写用户联系电话！");
			return false;
		}
		
		/* if(!message.equals('true')){
			alert("请填正确的联系方式！");
			return false;
		} */
		<%-- if(!result.equals('1')){
			alert("请填正确的联系方式！");
			<% session.removeAttribute("ok");%>
			return false;
		}
		 --%>
		return true;
	}

	$.post("CustomServlet?method=getDBs",{},
		function(result){
			var result = eval('('+result+')');
			if(result != null){
				for(var i = 0; i < result.length; i++){
					$("#dbs").append("<option value='" + result[i].id + "'>" + result[i].dbName + "</option>"); 
				}
			}
		}
	);
	$.post("CustomServlet?method=getEventTypes",{},
		function(result){
			var result = eval('('+result+')');
			if(result != null){
				for(var i = 0; i < result.length; i++){
					$("#et").append("<option value='" + result[i].id + "'>" + result[i].typeName + "</option>"); 
				}
			}
		}
	);	
	
	$.post("CustomServlet?method=getUserPhone",{},
			function(result){
				var result = eval('('+result+')');
				if(result != null){
					for(var i = 0; i < result.length; i++){
						$("#phone").append("<option value='" + result[i].phoneNumber + "'>" + result[i].phoneNumber + "</option>"); 
					}
				}
			}
		);
	
	/*
	$.post("CustomServlet?method=getLocationValue",{},
			function(result){
				var result = eval('('+result+')');
				if(result != null){
					for(var i = 0; i < result.length; i++){
						$("#locationValue").append("<option value='" + result[i] + "'>" + result[i] + "</option>"); 
					}
				}
			}
		);
	*/
	$(function(){
		$("#dbs").change(function(){
			var dbId = $("#dbs :selected").val();
			//如果数据库改变，那么相关下拉框重置
			$("#fields").empty();
			$("#locationFields").empty();
			$("#timestamp").empty();
			$("#locationValue").empty();
			$("#fields").append(" <option value='0'>请选择...</option>"); 
			$("#locationFields").append(" <option value='0'>请选择...</option>"); 
			$("#timestamp").append(" <option value='0'>请选择...</option>"); 
			$("#locationValue").append(" <option value='0'>请选择...</option>"); 
			$.post("CustomServlet?method=getTables", {dbId: dbId},
				function(result){
					var result = eval('('+result+')');
					if(result != null){
						$("#tables").empty();
						$("#tables").append(" <option value='0'>请选择...</option>"); 
						for(var i = 0; i < result.length; i++){
							$("#tables").append("<option value='" + result[i].id + "'>" + result[i].tableName + "</option>"); 
						}
					}
				}
			);
		});
		$("#tables").change(function(){
			var tId = $("#tables :selected").val();
			$.post("CustomServlet?method=getFields", {tId: tId,fieldType:"1"}, //1表示待监测字段类型
				function(result){
					var result = eval('('+result+')');
					if(result != null){
						
						$("#fields").empty();
						$("#fields").append(" <option value='0'>请选择...</option>"); 
						for(var i = 0; i < result.length; i++){
							$("#fields").append("<option value='" + result[i].id + "'>" + result[i].fieldName + "</option>"); 
							
						}
					}
				}
			);
			$.post("CustomServlet?method=getFields", {tId: tId,fieldType:"2"}, //1表示待监测字段类型
					function(result){
						var result = eval('('+result+')');
						if(result != null){
							
							$("#locationFields").empty();
							$("#locationFields").append(" <option value='0'>请选择...</option>"); 
							for(var i = 0; i < result.length; i++){
								$("#locationFields").append("<option value='" + result[i].id + "'>" + result[i].fieldName + "</option>"); 
								
							}
						}
					}
				);
			
			$.post("CustomServlet?method=getFields", {tId: tId,fieldType:"3"}, //1表示待监测字段类型
					function(result){
						var result = eval('('+result+')');
						if(result != null){
							
							$("#timestamp").empty();
							$("#timestamp").append(" <option value='0'>请选择...</option>"); 
							for(var i = 0; i < result.length; i++){
								$("#timestamp").append("<option value='" + result[i].id + "'>" + result[i].fieldName + "</option>"); 
								
							}
						}
					}
				);
			
			
		});
		
		$("#locationFields").change(function() {
			var field = $("#locationFields").find("option:selected").text();
			var dbName = $("#dbs").find("option:selected").text();
			var tbName = $("#tables").find("option:selected").text();
			$.post("CustomServlet?method=getLocationValue",{field: field,dbName:dbName,tbName:tbName},
					function(result){
				var result = eval('('+result+')');
				if(result != null){
					$("#locationValue").empty();
					for(var i = 0; i < result.length; i++){
						$("#locationValue").append("<option value='" + result[i] + "'>" + result[i] + "</option>"); 
					}
				}
			});
		});
		/* $("#check").click(function(){
			var phone = $("#phone").val();
			$.post("CustomServlet?method=checkUser", {phone: phone},
				function(result){
					var result = eval('('+result+')');
					if(result.exist == "1"){
						$("#error").html("");
						$("#message").html("该用户可用！");
					} else {
						$("#message").html("");
						$("#error").html("该用户不存在！");
					}
				}
			);
		}); */
		$("#submit").click(function(){
			if(checkForm() == false){
				return false;
			}
			var phone = $("#phone").val();
			$.post("CustomServlet?method=checkUser", {phone: phone},
				function(result){
					var result = eval('('+result+')');
					if(result.exist == "1"){
						//$('#myform').submit();
						//alert(result.exist);
						$.ajax({
							type: "POST",
							url: 'CustomServlet?method=custom',
							data:$('#myform').serialize(),
							async: false,
						    error: function(request) {
						        alert("提交失败！");
						    },
						    success: function(data) {
						    	var json = eval('('+data+')');
						    	if(json.result==1){
						    		$("#error").html("");
						    		$("#message").html("定制成功！");
						    	}
						    	else{
						    		$("#message").html("");
						    		$("#error").html("定制失败！");
						    	}
						    }
						});

					} else {
						alert("该用户不存在！");
						return false;
					}
				}
			);
		});
	})
	
	/* //js方法：序列化表单 			
	function serializeForm(form){
		var obj = {};
		$.each(form.serializeArray(),function(index){
			if(obj[this['name']]){
				obj[this['name']] = obj[this['name']] + ','+this['value'];
			} else {
				obj[this['name']] =this['value'];
			}
		});
		return obj;
	} */
	
</script>
<title>定制预警</title>
<style>
.form-horizontal {
	position: relative;
	top: 20px;
	left: 50px;
	width: 90%;
}
</style>
</head>
<body>
	<div class="form-horizontal" role="form">
		<form action="CustomServlet?method=custom" id="myform" method="post">
			<fieldset>
				<legend>选择目的字段</legend>
				<div class="form-group">
					<label class="col-sm-2 control-label">数据库名</label>
					<div class="col-sm-10">
						<select class="form-control" id="dbs" name="dbs">
							<option value="0">请选择...</option>
						</select>
					</div>
					<br /> <br /> <label class="col-sm-2 control-label">表名</label>
					<div class="col-sm-10">
						<select class="form-control" id="tables" name="tables">
							<option value="0">请选择...</option>
						</select>
					</div>
					<br /> <br /> <label class="col-sm-2 control-label">待监控字段名</label>
					<div class="col-sm-2">
						<select class="form-control" id="fields" name="fields">
							<option value="0">请选择...</option>
						</select>
					</div>
					<div class="col-sm-2">
							<select class="form-control" id="condition" name="condition">
								<option value="0">请选择...</option>
								<option value=">">大于</option>
								<option value="<">小于</option>
								<option value="=">等于</option>
							</select>
					</div>
					<div class="col-sm-4">
						<label class="col-sm-2 control-label">数值</label>
						<div class="col-sm-4">
							<input class="form-control" id="value" name="value" type="text"
								type="text" placeholder="" />
						</div>
					</div>
					<br /> <br /> <label class="col-sm-2 control-label" for="">位置字段名</label>
					<div class="col-sm-2">
						<select class="form-control" id="locationFields"
							name="locationFields">
							<option value="0">请选择...</option>
						</select>

					</div>
					<div class="col-sm-4">
						<select class="form-control" id="locationValue"
							name="locationValue">
							<option value="0">请选择...</option>
						</select>

					</div>
					<br /> <br /> <label class="col-sm-2 control-label" for="">时间戳字段名</label>
					<div class="col-sm-4">
						<select class="form-control" id="timestamp" name="timestamp">
							<option value="0">请选择...</option>
						</select>
					</div>
			</fieldset>

			<fieldset>
				<legend>事件相关参数</legend>
				<div class="form-group">
					<label class="col-sm-2 control-label">事件描述</label>
					<div class="col-sm-10">
						<input class="form-control" id="desc" name="desc" type="text"
							type="text" />
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">事件类型</label>
					<div class="col-sm-10">
						<select class="form-control" id="et" name="et">
							<option value="0">请选择...</option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">事件条件类型</label>
					<div class="col-sm-10">
						<select class="form-control" id="type" name="type">
							<option value="AND">同时发生</option>
							<option value="OR">任一发生</option>
						</select>
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-2 control-label" for="">轮询时间</label>
					<div class="col-sm-4">
						<input class="form-control" id="time" name="time" type="text"
							type="text" placeholder="单位（秒）" />
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label" for="">时间片</label>
					<div class="col-sm-4">
						<input class="form-control" id="span" name="span" type="text"
							type="text" placeholder="单位（秒）,时间片代表取出数据的时间间隔，应略大于轮询时间" />
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-2 control-label">用户电话</label>
					<div class="col-sm-4">
						<select class="form-control" id="phone" name="phone">
							<option value="0">请选择...</option>
						</select>
						<!-- <input id="check" type="button" class="btn btn-primary" value="检查用户"/> -->
						<font id="error" color="red">${error }</font> <font id="message"
							color="green">${message }</font>
					</div>
				</div>
			</fieldset>
			<fieldset>
				<legend>操作</legend>
				<div align="center">
					<input id="submit" type="button" class="btn btn-primary" value="提交" />
					&nbsp;&nbsp;&nbsp;&nbsp; <input type="reset"
						class="btn btn-primary" value="重置" />
				</div>
			</fieldset>
		</form>
	</div>
</body>
</html>